<template>
  <view class="my-userinfo-container">
    
	<view>
		
		<view class="association-item" style="background-color: white;" v-for="(item, i) in associationList" :key="i">
			<view style="height: 10px;background-color: #efefef;"></view>
			<navigator class="assocition-item" :url="'/subpkg/association_trends/association_trends?id=' +item.id+'&name='+item.createUserName+'&imgUrl='+item.littleImage+'&createUser='+item.createUser +'&title=热点详情' ">
				<view class="association-title"  >
					<!-- 社团头像 放左面-->
					<view class="association-title-left">
						<image class="association-title-img" :src="item.littleImage|| defaultPic" ></image>
					</view>
					<!-- 名称和时间放面-->
					<view class="association-title-right">
						<view class="association-title-name">{{item.createUserName}}</view>
						<view class="association-title-time">{{item.createTime}}</view>
					</view>
					
				</view>
			
			
			<view class="association-info">
				<view class="association-introduce">{{item.content}}</view>
				<!-- 图片 -->
				<view class="hot-img"  >
					<view class="" v-if="item.videoUrl">
						<video class="hot-img-item" :src="item.videoUrl " ></video>
					</view>
					<view v-else>
						<image class="hot-img-item" :src="item.imgUrl || defaultPic" ></image>
					</view>
					
				</view>
				
			</view>
			</navigator>
			
		</view>
		
	</view>
 
  </view>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'

  export default {
    data() {
      return {
		  //传值过来的id,即社团的id
		associationId: 0,
		associationList:[],
		tabs: ['笔记'],
		defaultPic:
		'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
		
		// 请求参数对象
		queryObj: {
			// 页码值
			pageNo: 1,
			// 每页显示多少条数据
			pageSize: 10
		},
      };
    },
    computed: {
      ...mapState('m_user', ['userinfo'])
	  ...mapState('m_dept', ['deptId']),
    },
	created() {
		
		// //得到的社团发布的活动内容
		this.getAssociationList()
	},
	
    methods: {
      ...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken']),
      async logout() {
        const [err, succ] = await uni.showModal({
          title: '提示',
          content: '确认退出登录吗？'
        }).catch(err => err)

        if (succ && succ.confirm) {
          this.updateAddress({})
          this.updateUserInfo({})
          this.updateToken('')
        }
      },
	  //获取热点动态
	  async getAssociationList() {
		  console.log("====================")
	  	// ** 打开节流阀
	  	this.isloading = true
	  	await uni.request({
	  		url: uni.$http.baseUrl+'/api/hotspot/getHotspot',
	  		data: {
	  			deptId: this.deptId,
	  		    associationId: this.associationId,
	  		    // 页码值
	  		    pageNo: this.queryObj.pageNo,
	  		    // 每页显示多少条数据
	  		    pageSize: this.queryObj.pageSize,
	  		},
	  		method: 'POST',
	  		header: {
	  			//"Content-Type": "application/json",
	  			"Content-Type": "application/x-www-form-urlencoded"
	  		},
	  		success: (res) => {
	  			this.data=res.data
	  			this.associationList=[...this.associationList, ...this.data.data] 
	  			console.log(this.associationList)
	  		},
	  		fail: (res) =>{
	  			if (res.statusCode !== 200) return uni.$showMsg()
	  		}
	  	});
	   },
	   switchTab(index) {
	     this.activeIndex = index;
	     if(index==0){
	   	  //切换tab时，重置参数
	   	  // 1. 重置关键数据
	   	  this.queryObj.pageNo = 1
	   	  this.isloading = false
	   	  this.associationList = []
	   	  this.associationNum = 0
	   	  this.getAssociationList()
	     }
		}
    }
  }
</script>

<style lang="scss">
  .my-userinfo-container {
    height: 100%;
    background-color: #F4F4F4;

    .top-box {
      height: 400rpx;
      background-color: #C00000;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .avatar {
        width: 90px;
        height: 90px;
        border-radius: 45px;
        border: 2px solid #FFF;
        box-shadow: 0 1px 5px black;
      }

      .nickname {
        font-size: 16px;
        color: #FFF;
        font-weight: bold;
        margin-top: 10px;
      }
    }
  }

  .panel-list {
    padding: 0 10px;
    position: relative;
    top: -10px;

    .panel {
      background-color: white;
      border-radius: 3px;
      margin-bottom: 8px;

      .panel-title {
        line-height: 45px;
        padding-left: 10px;
        font-size: 15px;
        border-bottom: 1px solid #F4F4F4;
      }

      .panel-body {
        display: flex;
        justify-content: space-around;

        .panel-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          padding: 10px 0;
          font-size: 13px;

          .icon {
            width: 35px;
            height: 35px;
          }
        }
      }
    }
  }

  .panel-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    padding: 0 10px;
    line-height: 45px;
  }
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }
  .active {
    color: #07a0ff;
    border-color: #07a0ff;
  }
  .association-title{
  	padding-top: 10px;
  	padding-bottom: 10px;
  	background-color: white;
  	display: flex;
  	.association-title-left{
  		padding-left: 10px;
  		width: 10%;
  		.association-title-img{
  			width: 30px; /* 宽度应该和高度相同 */
  			height: 30px;
  			border-radius: 50%; /* 圆形效果 */
  		}
  	}
  	.association-title-right{
  		width: 70%;
  		.association-title-name{
  			font-size: 16px;
  		}
  		.association-title-time{
  			font-size: 10px;
  			font-weight: 300px;
  			color: #d0d0d0;
  		}
  	}
  	.association-title-right-icon{
  		background-color: aqua;
  		width: 10%;
  	}
  }
</style>
